<template>
  <view>
    <!-- 个人信息卡片 -->
    <top></top>
    <!-- 页面信息 -->
    <view class="container">
      <!-- 背景图 -->

      <img src="https://shenai-fducs.oss-cn-shanghai.aliyuncs.com/shenai_interface/blood_bg.png" class="background"
        mode="aspectFill" />
      <view class="right_button" @tap="showPopup">
        <uni-icons type="info" size="22" color="#fff"></uni-icons>

      </view>

      <!-- 血量+机会 -->
      <!-- 	<view class="container-1">
				<view class="blood-hp">
					<image src="https://shenai-fducs.oss-cn-shanghai.aliyuncs.com/shenai_interface/eblood_200cc.gif" class="hp-img"></image>
				</view>
					<view class="blood-text-container">
					<text class="hp-text">血包能量：400cc</text>
					<text class="hp-text">今日答题机会：1</text>
				</view>
			</view> -->
      <!-- 三个按钮 -->
      <view class="container-button">
        <view :class="{ 'gray-button': grayBtn, 'bag-button': !grayBtn}" @click="goToTest">
          <text>开始答题</text>
        </view>
        <view class="bag-button" @click="goToExchange">
          <text>礼品兑换</text>
        </view>
        <view class="gray-button" @click="notOnline">
          <text>问卷调研</text>
        </view>
      </view>
      <uni-popup ref="popup" type="center" background-color="#fff" class="popup">
        <view class="popup-container">
          <view class="title-container">
            <text class="title1-1">
              参加「申爱」知识问答
            </text>
            <text class="title1-2">
              答题攒电子血包，赢取文创小礼品!
            </text>
          </view>

          <uni-section class="title2" title="活动时间" type="line">
            <view class="time-text">
              <text>2023年6月20日-9月30日23:59</text>
            </view>
          </uni-section>
          <uni-section class="title3" title="活动规则" type="line">
            <view class="time-text">
              <scroll-view class="scroll" scroll-y="true">
                <text class="rule-text">
                  1. 用户每日固定获得<text class="highlight">1次</text>答题机会，答题机会次数将在每日<text class="highlight">23：59</text>重置。\n
                  2. 题库由计算机基础知识、献血基础和党史组成，均为单项选择题。\n
                  3. 每次将从题库随机抽取<text class="highlight">10道</text>题目，每题不限制答题时间。\n
                  4. 用户可通过答题积攒电子血包能量值，详情如下：\n
                  每日答题：每正确答对一道题目获得4cc能量值；\n
                  额外奖励：答对全部题目可额外获得10cc能量值；\n
                  血包上限：<text class="highlight">500cc</text>能量值，请及时兑换礼物。\n
                  5. 当电子小血包达到额定能量200cc/300cc/400cc后，用户可线上兑换文创礼品cdk，凭cdk前往<text
                    class="highlight">虹口区鲁迅公园彩虹献血屋</text>领取。\n
                  6. 每类礼品每位用户<text class="highlight">不设兑换次数上限</text>。答题活动结束后未兑换的血包能量，活动结束后10月1日-10月31日仍可继续兑换。\n
                  7. 本次活动规则解释权归活动举办方所有。\n
                </text>
              </scroll-view>
            </view>
          </uni-section>
          <!-- <view class="button-container">
            <button class="button" @click="closeRule">我已阅读</button>
          </view> -->
        </view>


      </uni-popup>
    </view>
  </view>
</template>

<script>
  import top from "@/components/top.vue"
  export default {
    components: {
      top
    },
    data() {
      return {
        grayBtn: false
      };
    },
    onLoad() {
      // this.showPopup();
      this.IsGrayBtn()
    },
    onShow() {


    },
    methods: {
      showPopup() {
        this.$refs.popup.open()
      },
      IsGrayBtn() {
        var s1 = new Date().format("yyyy-MM-dd");
        this.grayBtn = s1 == wx.getStorageSync('shenai_last_quiz_date');
      },
      goToTest() {
        if (this.grayBtn) {
          uni.showToast({
            title: `今天已经答过题了，请明天再来~`,
            icon: 'none'
          });

        } else {


          uni.$once('refreshUserinfo', (param) => {
            this.IsGrayBtn()
          })
          
   
          
          uni.navigateTo({
            url: '/subpkg-bag/bag-test/bag-test'
          })
        }
      },
      goToExchange() {

        uni.navigateTo({
          url: '/subpkg-bag/bag-exchange/bag-exchange'
        })
      },
      closeRule() {
        this.$refs.popup.close();
      },
      notOnline() {
        uni.showToast({
          title: `还未上线`,
          icon: 'none'
        });
      }
    }
  }
</script>

<style lang="scss">
  .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .container {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
  }

  .container-1 {
    position: relative;
    top: 300rpx;
    left: -150rpx;
    display: flex;
    flex-direction: row;
    // border: 1rpx solid #EE8671;
    // background-color: white;
    // border-radius: 20rpx;
    // width: 80vw;
    height: 10vh;
    justify-content: center;
    align-items: center;
    margin: 20rpx;
  }

  .blood-hp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .hp-img {
    // width: 200rpx;
    // height: 200rpx;
    width: 300rpx;
    height: 300rpx;
  }

  .blood-text-container {
    background-color: rgba(255, 255, 255, 0.8);
    width: 45vw;
    height: 130rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10rpx;
    justify-content: center;
  }

  .hp-text {
    margin: 10rpx;
  }

  .container-button {
    position: relative;
    // top: 350rpx;
    left: 173rpx;
    top: 47vh;
    display: flex;
    flex-direction: column;
  }

  .bag-button {
    margin: 2vh;
    // border: 1rpx solid #EE8671;
    background-color: #ff7f6a;
    color: white;
    height: 70rpx;
    width: 273rpx;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.2);
  }

  .gray-button {
    margin: 2vh;
    // border: 1rpx solid #EE8671;
    background-color: #ff9797;
    color: white;
    height: 70rpx;
    width: 273rpx;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.2);
  }

  .right_button {
    // font-size: 22px;
    position: absolute;
    z-index: 99;
    // background-color: white;
    right: 5rpx;
    border-radius: 50%;
    top: calc(100% - 50rpx);

  }


  .filled {
    height: 40px;
    width: 40px;
    background-color: #ff7f6a;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2rpx 2rpx 10rpx #999999;
  }

  .popup {
    width: 100vw;
  }

  .popup-container {
    width: 75vw;

  }

  .title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .title1-1 {
    font-size: 40rpx;
  }

  .title1-2 {
    font-size: 28rpx;
  }

  .time-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .scroll {
    height: 50vh;
    width: 75vw;
  }

  .title3 {}

  .rule-text {
    line-height: 25px;
    word-break: break-all
  }

  .button-container {
    margin-top: 20rpx;
  }

  .highlight {
    color: #c21b1b;
    // background-color: yellow;
  }
</style>